//webpack 是基于nodejs的，所有的配置文件中的代码都是基于commonjs语法
const path =require("path")
// 引入插件 每一个插件都是一个类  需要new 插件是用来增强webpack的
const HtmlWebpackPlugin = require('html-webpack-plugin')
const{ ProgressPlugin,ProvidePlugin} =require("webpack")
module.exports = {
    //入口
    // entry:"./src/main.js" 相对路径
    entry:{
        chunk:["react","react-dom/client"],
        app:{
            // import是用来指定我们业务代码(项目源码)的入口
            import: path.resolve(__dirname,"../","src/main.js"),//绝对路径
            // 我们项目源码时依赖第三方包的
            dependOn:"chunk"
        }
    },
    // 出口
    output:{
        path:path.resolve(__dirname,"../","dist"),
        // filename指定一个格式化字符串  随后可以指定hash值
        // 代码变了重新打包  hash值会重新计算  解决浏览器缓存问题
        filename:"js/[name].[chunkhash:8].js",
        clean:true,//每次build打包时,自动删除之前打包的文件
    },
    // plugin  配置插件
    plugins:[
        // 每一个插件都是一个类  需要new
        new HtmlWebpackPlugin({
            // template:'./public/index.html',
            template:path.resolve(__dirname,"../","public/index.html"),
            filename:"index.html",//指定打包成功后页面的名字
            title:"vue-element-admin",//用来指定页面中title标题的
            favicon:path.resolve(__dirname,"../","public/favicon.png"),
        }),
        new ProgressPlugin(),
        new ProvidePlugin({
            React:path.resolve(__dirname,"../","node_modules/react/index.js")
        })
    ],
    // module是模块的意思，在webpack眼中一切都是模块
    module:{
        rules:[
            // 一.打包jsx ts js 等文件
            // loader是用来加载的，加载完后 使用@babel/** 进行编译转化 转化成ES5代码 */
            // 当webpack开始工作，遇到js或jsx结尾的模块时，使用babel-loader进行加载
            // 加载完后，需要交给@babel/* 编译器进行编译，编译后得到es5代码
            {test:/\.(js|jsx|ts|tsx)$/,use:"babel-loader",exclude: /node_modules/},
            // 二.打包css scss等文件
            // 当webpack开始工作，遇到css结尾的模块时,使用css-loader进行加载解析
            // 有style-loader接收,并把css代码以js的方式,插入到head标签中,是以内部样式的形式
            {test:/\.(css|scss)$/,use:["style-loader","css-loader","sass-loader"]},
            // 三、打包图片 文件
            // webpack4中使用 file-loader 和url-loader 两个loader处理图片
            // 在webpack5中 已淘汰这两个loader  
            // 统一使用type:["asset/resource"]来处理图片  相当于使用了file-loader
            {
                test:/\.(png|jpg|svg|gif|jpeg)$/,
                type:"asset/resource",
                generator:{
                    filename:'img/[name].[contenthash:8][ext]'
                }
            },
        ]
    },
    resolve:{
        // 配置解析src路径
        alias:{
            "@":path.resolve(__dirname,'../','src')
        },
        extensions:['.js','.jsx','ts','tsx']//允许省略哪些后缀
    }
}